import './scss/index.scss'
import './scss/flex.scss'
import './scss/footer.scss'
import './scss/header.scss'
import React from 'react'
import ReactDom from 'react-dom'
import {
    Router,
    Route,
    hashHistory,
    Link,
    browserHistory,
    IndexRoute
} from 'react-router'
import {Client} from './module/client'
import Login from './core/login'
import Register from './core/register'
import Main from './core/main'
import City from './core/map/city' //城镇
import Suburb from './core/map/suburb' //郊区
import Arena from './core/map/arena' //竞技场
import SecretHome from './core/map/secretHome' //神秘小屋
import Wharf from './core/map/wharf' //码头
import Dungeon from './core/map/dungeon' //副本
import Resources from './core/map/resources' //资源
import Training from './core/map/training' //试炼之所
import Tavern from './core/map/tavern' //冒险者酒馆
import Field from './core/map/field' //野外
import HotSpring from './core/map/hotSpring' //温泉
import Secret from './core/map/secret' //秘境
import Tower from './core/map/tower' //通天塔
import Mansion from './core/map/mansion' //城镇公馆
import Smithy from './core/map/smithy' //铁匠铺
import Devil from './core/map/devil' //魔王岛
import Immortal from './core/map/immortal' //仙人岛
import Cemetery from './core/map/cemetery' //墓地

import PlayerList from './core/playerList'
import {panelPop} from './core/panelPop'
import {userApi} from './api/user'

if (!window.G) {
    window.G = {
        player: null,
        propName: null,
        totalConfig: null
    }
}

if (!window.client) {
    let client = new Client()
    client.init({ip: '127.0.0.1', port: 12345})
    window.client = client

    window.client.on('socketOpen', function() {
        window.client.request('getErrMap', '', function(err, data) {
            window.client.errMap = data
        })

        window.client.request('getTotalConfig', '', function(err, data) {
            window.G.totalConfig = data
        })

        window.client.request('getPropName', '', function(err, data) {
            window.G.propName = data
        })

    })

}

window.panelPop = panelPop;

const Index = React.createClass({
    render() {
        return <div id='index'>
            <div className="nav flex-g-1 flex wrap">
                <Link to="/login">
                    <button>登录</button>
                </Link>
                <Link to="/register">
                    <button>注册</button>
                </Link>
                <Link to="/main">
                    <button>主页面</button>
                </Link>
                <Link to="/city">
                    <button>城市</button>
                </Link>
                <Link to="/field">
                    <button>试炼之所</button>
                </Link>
            </div>
        </div>
    }
});

const App = React.createClass({
    render() {
        return (
            <div className='flex d-column' id='app'>
                <Header/>
                <div className='flex-g-1'>
                    {this.props.children}
                </div>
                <Footer/>
            </div>
        )
    }
});

const Header = React.createClass({
    render() {
        return (
            <header className="flex wrap">
              <div className='item flex-col-1'>春</div>
              <div className='item flex-col-2'>1日</div>
              <div className='item flex-col-2'>1时</div>
              <div className='item flex-g-1 text-right'>下雨</div>
            </header>
        )
    }
});

const Footer = React.createClass({
    openPanel(name) {
        panelPop.openPanel(name)
    },
    contextTypes: {
        router: React.PropTypes.object
    },
    onClick() {
        var path = '/login';
        this.context.router.push(path);
    },
    output() {
        userApi.getPlayerInfo(function(err, data) {})
    },
    savePlayer() {
        userApi.savePlayer(function(err, data) {})
    },
    render() {
        return (
            <footer className="flex wrap">
                <button onClick={this.openPanel.bind(this, 'routePanel')}>界面跳转</button>
                <button onClick={this.output}>人物信息</button>
                <button onClick={this.openPanel.bind(this, 'basicInfo')}>人物属性</button>
                <button onClick={this.openPanel.bind(this, 'bag')}>背包</button>
                <button onClick={this.openPanel.bind(this, 'task')}>任务</button>
                <button onClick={this.openPanel.bind(this, 'mapInfo')}>地图</button>
                <button onClick={this.openPanel.bind(this, 'interface')}>接口</button>
                <button onClick={this.savePlayer}>保存角色</button>
            </footer>
        )
    }
});

ReactDom.render((
    <Router history={hashHistory}>
        <Route path="/" component={App}>
            <IndexRoute component={Index}/>
            <Route path="/register" component={Register}/>
            <Route path="/login" component={Login}/>
            <Route path="/playerList" component={PlayerList}/>
            <Route path="/main" component={Main}>
                <Route path="city/:id" component={City}/>
                <Route path="suburb/:id" component={Suburb}/>
                <Route path="arena/:id" component={Arena}/>
                <Route path="wharf/:id" component={Wharf}/>
                <Route path="secretHome/:id" component={SecretHome}/>
                <Route path="dungeon/:id" component={Dungeon}/>
                <Route path="resources/:id" component={Resources}/>
                <Route path="tavern/:id" component={Tavern}/>
                <Route path="training/:id" component={Training}/>
                <Route path="field/:id" component={Field}/>
                <Route path="hotSpring/:id" component={HotSpring}/>
                <Route path="secret/:id" component={Secret}/>
                <Route path="tower/:id" component={Tower}/>
                <Route path="smithy/:id" component={Smithy}/>
                <Route path="devil/:id" component={Devil}/>
                <Route path="immortal/:id" component={Immortal}/>
                <Route path="cemetery/:id" component={Cemetery}/>
            </Route>
        </Route>
    </Router>
), document.body);
